<template>
    <el-form :model="form" label-width="auto" class="container centered-content">
    
        <el-form-item label="Activity name">
            <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="Activity zone">
            <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
</template>
<script>

import { reactive } from "vue";

const form = reactive({
    account:'',
    password:'',
})
const onSubmit = ()=>{

}

</script>
<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 设置容器高度为视口高度，使内容垂直居中 */
}

.centered-content {
  text-align: center; /* 水平居中 */
}
</style>